<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Foundation -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<title>Tournoi</title>
</head>
<body class="antialiased">
	<jsp:include page="inc_menu.jsp"></jsp:include>
	<div class="row">
		<div class="large-9 large-centered columns">
			<div class="row">
				<div class="large-12 columns">
					<h1>Match</h1>
					<hr />
				</div>
				<div class="large-11 large-centered columns">
					<div class="row">
						<!-- Calcul du score total -->
						<c:set var="idEquipe1" value="${match.equipe1.idEquipe }" />
						<c:set var="score1" value="0" />
						<c:set var="score2" value="0" />
						<c:forEach var="but" items="${match.buts }">
							<c:choose>
								<c:when test="${but.auteur.equipe.idEquipe == idEquipe1 }">
									<c:set var="score1" value="${score1 + 1 }" />
								</c:when>
								<c:otherwise>
									<c:set var="score2" value="${score2 + 1 }" />
								</c:otherwise>
							</c:choose>
						</c:forEach>
						<!-- Fin -->
						<c:forEach begin="0" end="1" varStatus="loop">
							<c:set var="equipe"
								value="${loop.index == 0 ? match.equipe1 : match.equipe2 }" />
							<c:set var="align"
								value="${loop.index == 0 ? 'text-align: left;' : 'text-align: right;' }" />
							<c:if test="${ match.getIdEquipeGagnante() > -1 }">
								<c:set var="score1Color" value="${ match.getIdEquipeGagnante() == match.getEquipe1().getIdEquipe() ? 'color: green' : 'color: red' }" />
								<c:set var="score2Color" value="${ match.getIdEquipeGagnante() == match.getEquipe2().getIdEquipe() ? 'color: green' : 'color: red' }" />
							</c:if>
							<c:if test="${ match.getIdEquipeGagnante() == -1 }">
								<c:set var="score1Color" value="${ score1 == score2 ? 'color: black;' : (score1 > score2 ? 'color: green;' : 'color: red;') }" />
								<c:set var="score2Color" value="${ score1 == score2 ? 'color: black;' : (score2 > score1 ? 'color: green;' : 'color: red;') }" />
							</c:if>
							<div class="large-5 columns" style="${align}">
								<c:choose>
									<c:when test="${loop.index == 0 }">
										<h3 style="float: left;">${equipe.nom }</h3>
										<h3 style="float: right;${score1Color}">${score1 }</h3>
									</c:when>
									<c:otherwise>
										<h3 style="float: left;${score2Color}">${score2 }</h3>
										<h3 style="float: right;">${equipe.nom }</h3>
									</c:otherwise>
								</c:choose>
								<span style="clear: both;" />
								<hr />
								<div class="row">
									<div class="large-12 columns">
										<c:forEach var="joueur" items="${ equipe.joueurs}"
											varStatus="loop2">
											<div style="height: 30px;">
												<c:choose>
													<c:when test="${loop.index == 0 }">
												${joueur.nom }&nbsp;${joueur.prenom }
												<c:forEach var="but"
															items="${match.listeButsParJoueur(joueur.getIdPersonne()) }">
															<img src="img/soccerball24.png"
																title="${but.getMinute() } min."></img>
														</c:forEach>
													</c:when>
													<c:otherwise>
														<c:forEach var="but"
															items="${match.listeButsParJoueur(joueur.getIdPersonne()) }">
															<img src="img/soccerball24.png"
																title="${but.getMinute() } min."></img>
														</c:forEach>
												${joueur.nom }&nbsp;${joueur.prenom }
									</c:otherwise>
												</c:choose>
											</div>
										</c:forEach>
									</div>
								</div>
							</div>
							<c:if test="${loop.index == 0 }">
								<div class="large-2 columns" style="text-align: center;">
									<h3>VS</h3>
								</div>
							</c:if>
						</c:forEach>
					</div>
					<hr />
					<c:if test="${match.prolongations || match.tirsAuButs}">
						<div class="row">
							<div class="large-12 columns">
								<c:if test="${match.prolongations }">
									<span data-tooltip class="has-tip"
										title="Il y a eu des prolongations">prolongations</span>
								</c:if>
								<c:if test="${match.tirsAuButs }">
									<c:if test="${match.prolongations }">
							&nbsp;/&nbsp;
							</c:if>
									<span data-tooltip class="has-tip"
										title="Il y a eu des tirs au but">tirs au but</span>
								</c:if>
							</div>
						</div>
						<hr />
					</c:if>
					<div class="row">
						<div class="large-12 columns">
							<h3>Buts</h3>
							<c:choose>
								<c:when test="${fn:length(match.buts) > 0}">
									<c:forEach var="but" items="${match.buts }">
										<c:set var="auteur" value="${but.auteur }" />
										<div class="row">
											<c:choose>
												<c:when test="${auteur.equipe.idEquipe == idEquipe1 }">
													<div class="large-7 columns">
														<div class="panel">
															<span style="float: left; text-align: left;">${ but.minute}
																min.</span> <span style="float: right; text-align: right;">${auteur.nom }&nbsp;${auteur.prenom }
															</span>
															<div style="clear: both;"></div>
														</div>
													</div>
												</c:when>
												<c:otherwise>
													<div class="large-5 columns"></div>
													<div class="large-7 columns">
														<div class="panel">
															<span style="float: left; text-align: left;">${auteur.nom }&nbsp;${auteur.prenom }</span>
															<span style="float: right; text-align: right;">${ but.minute}
																min.</span>
															<div style="clear: both;"></div>
														</div>
													</div>
												</c:otherwise>
											</c:choose>
										</div>
									</c:forEach>
								</c:when>
								<c:otherwise>
							Aucun but.
							</c:otherwise>
							</c:choose>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>');
	</script>

	<script src="js/foundation.min.js"></script>
	<script src="js/foundation/foundation.section.js"></script>
	<script>
		$(document).foundation();

		function createEquipe(data) {
			var str = '<div class="large-12 columns">'
					+ '<div class="row"><div class="large-12 columns" style="text-align: center;">'
					+ data.representant.nom + ' ' + data.representant.prenom
					+ '</div></div>' + '<hr/>';
			str = str + '<div class="row">';
			var joueurs = data.joueurs;
			/* Première colonne */
			str = str + '<div class="large-6 columns">';
			for (var i = 0; i < Math.ceil(joueurs.length / 2); i++) {
				str = str
						+ '<div class="row"><div class="large-12 columns" style="text-align: center;">'
						+ joueurs[i].nom + ' ' + joueurs[i].prenom
						+ '</div></div>';
			}
			str = str + '</div>';
			/* Seconde colonne. */
			str = str + '<div class="large-6 columns">';
			for (var i = Math.ceil(joueurs.length / 2); i < joueurs.length; i++) {
				str = str
						+ '<div class="row"><div class="large-12 columns" style="text-align: center;">'
						+ joueurs[i].nom + ' ' + joueurs[i].prenom
						+ '</div></div>';
			}
			str = str + '</div>';
			str = str + '</div>';
			str = str + '</div>';
			'</div>';
			return str;
		}

		function loadEquipe(id) {
			$.ajax({
				dataType : "json",
				url : "miniprojet?action=equipe&id=" + id,
				success : function(data) {
					var e = $("#equipe" + id + "_empty");
					if (e.length) {
						e.attr("id", "equipe" + id + "_content");
						e.html(createEquipe(data));
					}
					;
				},
				error : function(jqxhr, status, error) {
					alert(error);
				}
			});
		};
	</script>
</body>
</html>